<template>
	<view class="fu-p-y-20">
		<view class="fu-m-x-30">
			<view class="">
				<text>物流公司：</text>
				<text>XX快递</text>
			</view>
			<view class="fu-m-t-20">
				<text>快递单号：</text>
				<text>YD20252525252525</text>
			</view>
			<view class="fu-m-t-20">
				<text>预计送达：</text>
				<text>3月1日</text>
			</view>
		</view>
		
		<view class="fu-h-20 fu-bg-grey fu-m-y-30"></view>
		
		<view class="fu-m-x-30">
			<fu-timeaxis>
				<fu-timeaxis-item v-for="(item,index) in list" :key="index">
					<template v-slot:node>
						<view :class="[item.name? 'fu-node': 'fu-node-dot', {'fu-bg-2979ff': index == 0}]">
							<fu-icons :name="item.icon" color="#ffffff"></fu-icons>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="fu-title" v-if="item.name">{{ item.name || '' }}</view>
							<view class="fu-font-28 fu-m-b-12">{{ item.desc || '' }}</view>
							<view class="fu-font-24 fu-color-999999">{{ item.time || '' }}</view>
						</view>
					</template>
				</fu-timeaxis-item>
			</fu-timeaxis>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	
	// data数据
	let list = reactive([
		{ name: '已签收', desc: '【郑州市】您的快件已签收，签收人:本人，(温馨提示您:戴口置取消快递，个人防护要牢记)，如有疑问请电联快递员:李四(13000000000)，投诉电话:xxx-1234567890-02-17', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
		{ name: '已派送', desc: '正在由【XXX】派送您的快递，有问题请拨打【15024878999】', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
		{ name: '', desc: '快件离开【XX转运中心】已发往【XXX转运中心】', time: '2025-02-17 19:01:46' },
		{ name: '', desc: '快件离开【亳州谯城网点】已发往【商丘转运中心】', time: '2025-02-17 19:01:46' },
		{ name: '', desc: '【XX网点】的XX(18256787912)已取件，投诉电话:xxxx-000000', time: '2025-02-17 19:01:46' },
		{ name: '已发货', desc: '商家已发货，正在通知XX快递取件', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
		{ name: '已打包', desc: '您的订单已打包完成', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
		{ name: '', desc: '您的订单已验货完成', time: '2025-02-17 19:01:46' },
		{ name: '已下单', desc: '订单确认，已通知商家配货', time: '2025-02-17 19:01:46', icon: 'check-mark-circle-fill' },
		{ name: '', desc: '您已提交订单，请等待系统确认', time: '2025-02-17 19:01:46' }
	]);
</script>

<style lang="scss" scoped>
	$node: 44rpx;
	$node-dot: 16rpx;
	
	.fu-node {
		height: $node;
		width: $node;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
	}
	
	.fu-node-dot {
		height: $node-dot;
		width: $node-dot;
		background-color: #ddd;
		border-radius: 50%;
		margin-top: 12rpx;
	}
	
	.fu-title {
		padding-bottom: 12rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
</style>